<script setup>
import { ref, watch, computed } from 'vue'
import { listFeedbackForMemberService, updateFeedbackService } from '@/api/feedback.js'

// 下拉刷新
const refreshLoading = ref(false)

// 评价状态
const feedbackStatus = ref('待评价')
const tabs = ['待评价', '已评价']
// 激活的tab索引
const active = computed({
  get() {
    return tabs.indexOf(feedbackStatus.value)
  },
  set(newValue) {
    feedbackStatus.value = tabs[newValue]
  }
})

const feedbackList = ref()

// 获取评价列表
const listFeedback = async () => {
  const res = await listFeedbackForMemberService(feedbackStatus.value)
  feedbackList.value = res.data.data
  refreshLoading.value = false
}
listFeedback()

// 监听active变化时，重新获取评价列表
watch(active, (newValue) => {
  feedbackStatus.value = tabs[newValue]
  listFeedback()
})

// 提交评价
const updateFeedback = async (feedback) => {
  if (!feedback.rating) {
    showNotify({
      type: 'warning',
      message: '请填写评分'
    })
    return
  }
  if (!feedback.content) {
    showNotify({
      type: 'warning',
      message: '评价内容不能为空'
    })
    return
  }
  showDialog({
    title: '确认提交',
    message: '确定提交该评价吗？提交后不可修改！',
    showConfirmButton: true,
    showCancelButton: true
  }).then(async () => {
    await updateFeedbackService({
      id: feedback.id,
      rating: feedback.rating,
      content: feedback.content
    })
    showNotify({
      type: 'success',
      message: '评价成功'
    })
    listFeedback()
  })
}
</script>

<template>
  <div class="feedback-manage">
    <van-nav-bar title="服务评价" left-text="返回" left-arrow @click-left="$router.back()" fixed />
    <van-pull-refresh v-model="refreshLoading" @refresh="listFeedback" success-text="加载成功">
      <div class="user-feedback">
        <van-tabs v-model:active="active" sticky offset-top="46px">
          <van-tab v-for="tab in tabs" :key="tab" :title="tab">
            <div class="feedback-list">
              <van-empty v-if="!feedbackList?.length" image="search" description="无评价记录" />
              <div v-for="feedback in feedbackList" :key="feedback.id" class="feedback-card">
                <div class="feedback-header">
                  <span class="feedback-time">{{ feedback.updateTime }}</span>
                  <span>{{ feedback.status }}</span>
                </div>

                <div class="feedback-info">
                  <van-field
                    label="服务名称："
                    label-width="70"
                    v-model="feedback.projectName"
                    :border="false"
                    readonly
                    style="padding: 2px"
                  />
                  <van-field
                    label="车牌号："
                    label-width="70"
                    v-model="feedback.carPlateNumber"
                    :border="false"
                    readonly
                    style="padding: 2px"
                  />
                  <van-field
                    label="服务员工："
                    label-width="70"
                    v-model="feedback.employeeName"
                    :border="false"
                    readonly
                    style="padding: 2px"
                  />
                  <van-field
                    label="服务评分："
                    label-width="70"
                    :border="false"
                    readonly
                    style="padding: 2px"
                  >
                    <template #input>
                      <van-rate
                        v-model="feedback.rating"
                        color="#ffd21e"
                        void-color="#eee"
                        :readonly="feedbackStatus === '已评价'"
                      />
                    </template>
                  </van-field>
                  <van-field
                    label="评价内容："
                    placeholder="请输入评价内容"
                    label-width="70"
                    v-model="feedback.content"
                    type="textarea"
                    rows="1"
                    autosize
                    :border="false"
                    :readonly="feedbackStatus === '已评价'"
                    style="padding: 2px"
                  />
                </div>

                <div class="feedback-footer">
                  <van-button
                    v-if="feedbackStatus === '待评价'"
                    size="small"
                    type="primary"
                    @click="updateFeedback(feedback)"
                  >
                    提交评价
                  </van-button>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </van-pull-refresh>
  </div>
</template>

<style lang="scss" scoped>
.feedback-manage {
  padding-top: 46px;
  background-color: #f7f8fa;
  min-height: 100vh;

  .user-feedback {
    height: 100%;

    .feedback-list {
      padding: 12px;

      .feedback-card {
        background: #fff;
        border-radius: 10px;
        margin-bottom: 12px;
        padding: 16px;

        .feedback-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6px;
          padding-bottom: 6px;
          border-bottom: 1px solid #f5f5f5;

          .feedback-time {
            color: #666;
            font-size: 14px;
          }
        }

        .feedback-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .feedback-footer {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          margin-top: 6px;
          padding-top: 6px;
          border-top: 1px solid #f5f5f5;
        }
      }
    }
  }
}
</style>
